// src/APP.vue

<template>
<div id="todo-list-example">
  <div>组件和v-for</div>
  <form v-on:submit.prevent="addNewTodo">
    <label for="new-todo">Add a todo</label>
    <input
      v-model="datas.newTodoText"
      id="new-todo"
      placeholder="E.g. Feed the cat"
    />
    <button>Add</button>
  </form>
  <ul>
    <todo-item
      v-for="(todo, index) in datas.todos"
      :key="todo.id"
      :title="todo.title"
      @remove="datas.todos.splice(index, 1)"
    ></todo-item>
  </ul>
</div>
</template>

<script lang="ts">
import {   defineComponent, reactive } from 'vue'
import TodoItem from './components/todo-item.vue'

export default defineComponent({
  name:"APP",
  components: {
    TodoItem
  },
  setup() {
    const datas = reactive({
      newTodoText: '',
      todos: [
        {
          id: 1,
          title: 'Do the dishes'
        },
        {
          id: 2,
          title: 'Take out the trash'
        },
        {
          id: 3,
          title: 'Mow the lawn'
        }
      ],
      nextTodoId: 4
    })

    const addNewTodo = () => {
      datas.todos.push({
        id: datas.nextTodoId++,
        title: datas.newTodoText
      })
      datas.newTodoText = ''
    }
    return {
      addNewTodo,
      datas
    }

  }
})
</script>